<template>
  <section class="card-box card-two">
      <div class="card-header">
        <CardTitle :title="`报道摘编 `+ dateFormatMX('YYYY-mm-dd',pickerValue.getTime())" @showCalendar="setOpenPicker"></CardTitle>
      </div>

       <div class="card-content">

        <NoData v-if="list.length == 0"></NoData>
        <swiper class="mySwiper" :options="swiperOption" ref="mySwiperA" v-if="list.length > 0">
          <swiper-slide v-for="(it,i) in list" :key="i">
            <div class="txt-wrapper">
              <h3 :title="it.title">{{ it.title }}</h3>
              <section class="txt-subtxt">
                <span class="datetime-txt">{{dateFormatMX("mm-dd",it.createTime)}} 刊发</span>
                <span class="star-box">
                  <Star :activeNum="it.star"></Star>
                </span>
              </section>
              <section class="txt-content">
                <p class="image-p" v-if="it.image">
                  <img :src="`http://121.201.107.99:20023/epaper/`+it.image" v-if="it.image" class="txt-image" />
                </p>
                <p>{{ it.content }}</p>
              </section>
              <section class="txt-about-link">
                <h4>相关链接</h4>
                <ul class="link-list">
                  <li v-for="(t,index) in JSON.parse(it.urls)" :key="index" @click="goToNewPage(t.url)">{{ t.name }}</li>
                </ul>
              </section>
            </div>
          </swiper-slide>
        </swiper>


          
       </div>

       <div class="card-footer">
         <CardFooter :currentPage="currentPage" :totalPage="list.length" @getCurrentPage="getCurrentPage"></CardFooter>
       </div>

       <mt-datetime-picker ref="picker" type="date" v-model="pickerValue" @confirm="handleConfirm" class="cdatePicker" year-format="{value} 年" month-format="{value} 月" date-format="{value} 日"></mt-datetime-picker>

  </section>
</template>

<script>
import CardTitle from '@/components/card-title/index.vue'
import CardFooter from '@/components/card-foot/index.vue'
import Star from '@/components/star-box/index.vue'
import NoData from '@/components/no-data/null.vue'

import { swiper, swiperSlide } from 'vue-awesome-swiper' 

import { mapState } from 'vuex';

export default {
  name:'card-two',
  data(){
    return {
      pickerValue: new Date(), // 当前选择地时间
      currentPage: 1, // 当前页
      // currentDate: new Date().getTime(), // 当前时间
      list: [], // 新闻列表
      btnOnoff: true,
      params: {
        page: 1,
        size: 500,
        totalNum: 6,
        totalPage: 1,
      }, // 参数
      swiperOption: {
        // 所有配置均为可选（同Swiper配置）  
        // notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
        notNextTick: true,     //我现在还没有搞清楚这个东西，反正加上就是了
        autoplay: {
          delay: 5000,
          stopOnLastSlide: false,
          disableOnInteraction: true, // 用户操作后停止自动播放
        },
        observer:true,//修改swiper自己或子元素时，自动初始化swiper 
　　    observeParents:true,//修改swiper的父元素时，自动初始化swiper 
        loop:true,
        grabCursor : true,
        setWrapperSize :true,
        autoHeight: true,
        pagination : '.swiper-pagination',
        paginationClickable :true,
        scrollbar:'.swiper-scrollbar',
        mousewheelControl : true,
        onTransitionStart(swiper){
          console.log(swiper)
        },
        on:{
          // 开始运动
          slideChangeTransitionStart:() => {
            this.$nextTick(() => {
              // this.currentPage = this.swiper.activeIndex;
            })
            // console.log(this.swiper.activeIndex)
          },
          // 结束运动
          slideChangeTransitionEnd: () => {
            this.btnOnoff = true;
            this.$nextTick(() => {
              if(this.swiper.activeIndex == this.list.length+1){
                this.currentPage = 1;
                return;
              }else if(this.swiper.activeIndex == 0){
                this.currentPage = this.list.length;
                return;
              }
              // console.log(this.swiper.activeIndex);
              this.currentPage = this.swiper.activeIndex;
            })
          },
        }
      },
      pramsAttr:{
        startTime: '',
        endTime: ''
      }
    }
  },
  created(){
    this.requestListApi();
  },  
  methods:{
    // 获取新闻列表
    requestListApi(){
      this.axios.get(`${this.serverApi}/reportPaper/list`,{
        params: this.pramsAttr
      }).then(res => {
        if(res.data.data){
          this.list = res.data.data.data;
          

          // 其他参数
          this.currentPage = 1; // 当前页
          this.params.page = res.data.data.page;
          this.params.size = res.data.data.size;
          this.params.totalNum = res.data.data.totalNum;
          this.params.totalPage = res.data.data.totalPage;

          console.log(this.list);
          // debugger
        }
      })
    },
    // 去到新页面
    goToNewPage(url){
      console.log(url);
      window.open(url,Math.random());
    },
    // 调到指定页面
    getCurrentPage(page,status){

      // console.log(page,status);

      if(!this.btnOnoff || this.list.length == 0){ return; }
      this.btnOnoff = false;
      // console.log(page,status);

      if(page <= 1){
        page = 1;
        this.btnOnoff = true;
      }else if(page >= this.list.length){
        page = this.list.length;
        this.btnOnoff = true;
      }

      this.currentPage = page;
      // console.log(page,status);

      // 跳到指定页面
      // console.log(this.currentPage-1);
      // this.swiper.slideTo(this.currentPage-1, 1000, false); //切换到第一个slide，速度为1秒
      this.$nextTick(() => {
        if(status === 'prev'){
          this.swiper.slidePrev(1000,true);
        }else{
          this.swiper.slideNext(1000,true);
        }
      })

    },
    handleConfirm(v){
      console.log(v)

      // 重新请求
      this.pramsAttr.startTime = new Date(new Date(new Date(v).toLocaleDateString()).getTime()).getTime(); // 当天0点
      this.pramsAttr.endTime = new Date(new Date(new Date(v).toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 -1 ).getTime();// 当天23:59

      this.requestListApi();

    },
    setOpenPicker(){
      // document.querySelector('.v-modal').style.position = 'absolute';
      this.$refs.picker.$el.style.position = 'absolute';
      this.$refs.picker.open();
      let t = setInterval(() => {
        // console.log(this.$refs.picker.$el)
       if(this.$refs.picker.$el.parentNode.getElementsByClassName('v-modal').length > 0){
         this.$refs.picker.$el.parentNode.getElementsByClassName('v-modal')[0].style.display = 'none';
         window.clearInterval(t);
       }
      },30);
    }
  },
  computed:{
    ...mapState(['serverApi','imgApi']),
    swiper () {
      return this.$refs.mySwiperA.swiper
    },
  },
  components:{
    CardTitle,
    CardFooter,
    Star,
    swiper, 
    swiperSlide,
    NoData
  }
}
</script>

<style scoped lang="scss">
  .card-box{
    width:100%;height:100%;background-color:#fff;position:relative;overflow:hidden;
    /* card-content */
    .card-content{
      width:100%;height:calc(100% - 150px);margin-top:10px;background-color:#fff;position:relative;overflow-x:hidden; overflow-y: auto;
      .txt-wrapper{
        width:calc(100% - 32px);height:100%;margin:0 auto;overflow-x:hidden;overflow-y:auto;box-sizing:border-box;padding:0 20px;
        h3{width:100%;height:40px;line-height:40px;font-size:20px;font-weight: 500;margin:0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
        .txt-subtxt{
          width:100%;height:40px;line-height:40px;display:flex;flex-wrap:nowrap;justify-content: space-between;
          .datetime-txt{font-size:12px;color:#b2b2b2;}
        }
        /* txt-content */
        .txt-content{
          border-bottom:1px solid #efefef;padding-bottom:20px;
          .txt-image{width:100%;}
          p{ text-indent:2em;line-height:30px;color:#777;font-size: 16px;  }
          .image-p{text-indent:0;}
        }
        /* txt-about-link */
        .txt-about-link{
          margin-top:5px;
          h4{ height:40px; line-height:40px; font-size:16px; margin:0;}
          .link-list{
            width:100%;list-style: none;padding:0;margin:0;
            li{ 
              height:26px; line-height: 26px; cursor: pointer;font-size:15px;
              &:hover{ text-decoration: underline; }
            }
          }
        }
      }
    }

    /* card-more */
    .card-footer{
      width:100%;height:66px;position:absolute;left:0;bottom:0;
      // .view-more{padding:10px 30px;color:#fff;background-color:#268eff;}
    }
  }
</style>